<template>
  <div>
    <el-form :inline="true" :model="formSearch" size="mini">
      <el-row>
        <el-col :span="10">
          <el-form-item label="队名" label-width="80px">
            <el-autocomplete
                v-model="formSearch.teamName"
                placeholder="请输入队名"
                :fetch-suggestions="teamSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="teamSelect"
            >
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="英雄" label-width="80px">
            <el-autocomplete
                v-model="formSearch.heroName"
                placeholder="请输入英雄"
                :fetch-suggestions="heroSearch"
                :trigger-on-focus="false"
                :debounce="0"
                @select="heroSelect"
            >
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <div class="name" style="font-size: 10px; color: #888">
                  {{ item.keywords }}
                </div>
              </template>
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="开始时间" label-width="80px">
            <el-date-picker
                type="date"
                placeholder="起始日期"
                v-model="formSearch.date1"
                format="yyyyMMdd"
                value-format="yyyyMMdd"
                style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="结束时间" label-width="80px">
            <el-date-picker
                type="date"
                placeholder="结束日期"
                v-model="formSearch.date2"
                format="yyyyMMdd"
                value-format="yyyyMMdd"
                style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <!-- circle icon="el-icon-search" -->
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider></el-divider>
    <el-row :gutter="10" size="mini">
      <el-col :span="12">
        <el-card>
          <el-row :gutter="10" :body-style="{}">
            <el-col :span="6">
              <el-image :src="teamThis.logo"></el-image>
            </el-col>
            <el-col :span="18">
              <span>赛队：{{ teamThis.value }}</span><br>
              <span>比赛：{{ teamHero.teamWonNum }}/{{ teamHero.teamTotalGames }}(赢/总)</span><br>
              <span>胜率：{{ teamHero.teamWonRate }}(%)</span><br>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <el-row :gutter="10" :body-style="{}">
            <el-col :span="6">
              <el-image :src="heroThis.src"></el-image>
            </el-col>
            <el-col :span="18">
              <span>英雄：{{ heroThis.value }}</span><br>
              <span>出场：{{ teamHero.heroWonNum }}/{{ teamHero.heroTotalNum }}(赢/总)</span><br>
              <span>胜率：{{ teamHero.heroWonRate }}(%)</span><br>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card style="margin-top: 20px">
          <el-row>
            <span>赛队-英雄关联数据</span>
          </el-row>
          <el-divider></el-divider>
          <el-row :gutter="10" :body-style="{margin:5}">
            <el-col :span="12">
              <span>PICK英雄次数：{{ teamHero.pickHeroWonNum }}/{{teamHero.pickHeroNum}}(赢/总)</span>
            </el-col>
            <el-col :span="12">
              <span>PICK英雄胜率：{{ teamHero.pickHeroWonRate}}(%)</span>
            </el-col>
            <el-col :span="12">
              <span>对阵英雄成绩：{{ teamHero.pkHeroWonNum }}/{{ teamHero.pkHeroNum }}(赢/总)</span>
            </el-col>
            <el-col :span="12">
              <span>BAN英雄次数：{{ teamHero.teamBanHeroNum }}/{{teamHero.teamTotalGames}}(ban/总)</span>
            </el-col>

          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "analysis",
  components: {},
  data() {
    return {
      formSearch: {},
      teamThis: {
        value: "",
        logo: "",
      },
      heroThis: {
        value: ""
      },
      teamHero: {
        teamTotalGames: 0,
        teamWonNum: 0,
        teamWonRate: 0,
        heroTotalNum: 0,
        heroWonNum: 0,
        heroWonRate: 0,
        pkHeroNum: 0,
        pkHeroWonNum: 0,
        pickHeroNum: 0,
        pickHeroWonNum: 0,
        teamBanHeroNum: 0,
        pickHeroWonRate: 0,
      },
    };
  },
  created() {
    let now = new Date();
    // this.formSearch.date1 = this.getLastMonthDate(now);
    // this.formSearch.date2 = now;
    setInterval(this.updateRate, 500);
    setInterval(this.onSubmit,5000);
  },
  methods: {
    onSubmit() {
      //查询 赛队总场次，胜率 英雄出场次数，胜率 英雄禁用次数，*禁用率  赛队对阵英雄次数，对阵胜率
      if (!this.formSearch.date1 || !this.formSearch.date2) {
        // this.$message({
        //   showClose: true,
        //   message: "请选择日期!",
        //   type: "error",
        // });
      } else {
        this.getTeamTotalNum();
        this.getTeamWonNum();
        this.getHeroTotalNum();
        this.getHeroWonNum();
        this.getTeamBanHeroNum();
        this.getTeamPkHeroNum();
        this.getTeamPkHeroWonNum();
        this.getPickHeroNum();
        this.getPickHeroWonNum();
        // debugger;
        let rate1 = (this.teamHero.teamWonNum / this.teamHero.teamTotalGames) * 100
        let rate2 = (this.teamHero.heroWonNum / this.teamHero.heroTotalNum) * 100
        this.teamHero.teamWonRate = this.keepTwoDecimal(rate1.toString());
        this.teamHero.heroWonRate = this.keepTwoDecimal(rate2.toString());
        // console.log("that.teamHero:", this.teamHero)
      }
    },
    getLastMonthDate(date) {
      //  1    2    3    4    5    6    7    8    9   10    11   12月
      var daysInMonth = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
      var strYear = date.getFullYear();
      var strDay = date.getDate();
      var strMonth = date.getMonth() + 1;
      //一、解决闰年平年的二月份天数   //平年28天、闰年29天//能被4整除且不能被100整除的为闰年,或能被100整除且能被400整除
      if (((strYear % 4) === 0) && ((strYear % 100) !== 0) || ((strYear % 400) === 0)) {
        daysInMonth[2] = 29;
      }
      if (strMonth - 1 === 0) //二、解决跨年问题
      {
        strYear -= 1;
        strMonth = 12;
      } else {
        strMonth -= 1;
      }
      //  strDay = daysInMonth[strMonth] >= strDay ? strDay : daysInMonth[strMonth];
      strDay = Math.min(strDay, daysInMonth[strMonth]);//三、前一个月日期不一定和今天同一号，例如3.31的前一个月日期是2.28；9.30前一个月日期是8.30

      if (strMonth < 10)//给个位数的月、日补零
      {
        strMonth = "0" + strMonth;
      }
      if (strDay < 10) {
        strDay = "0" + strDay;
      }
      var datastr = strYear + strMonth + strDay;
      return datastr;
    },
    getPickHeroNum(){
      let that = this;
      this.$db.records.loadDatabase();
      this.$db.records.find(
          {
            $where: function () {
              return (
                  this.date >= that.formSearch.date1 &&
                  this.date <= that.formSearch.date2 &&
                  ((this.name1 === that.formSearch.teamName && this.pick1.indexOf(that.formSearch.heroName) > -1) ||
                      (this.name2 === that.formSearch.teamName && this.pick2.indexOf(that.formSearch.heroName) > -1))
              );
            },
          },
          function (err, docs) {
            // debugger;
            let games = docs
            // 总场次
            that.teamHero.pickHeroNum = games.length || 0;
          }
      );
    },
    getPickHeroWonNum(){
      let that = this;
      this.$db.records.loadDatabase();
      this.$db.records.find(
          {
            $where: function () {
              return (
                  this.date >= that.formSearch.date1 &&
                  this.date <= that.formSearch.date2 &&
                  ((this.name1 === that.formSearch.teamName && this.pick1.indexOf(that.formSearch.heroName) > -1) ||
                      (this.name2 === that.formSearch.teamName && this.pick2.indexOf(that.formSearch.heroName) > -1)) &&
                  this.winner === that.formSearch.teamName
              );
            },
          },
          function (err, docs) {
            // debugger;
            let games = docs
            // 总场次
            that.teamHero.pickHeroWonNum = games.length || 0;
          }
      );
    },
    getTeamPkHeroWonNum() {
      let that = this;
      this.$db.records.loadDatabase();
      this.$db.records.find(
          {
            $where: function () {
              return (
                  this.date >= that.formSearch.date1 &&
                  this.date <= that.formSearch.date2 &&
                  ((this.name1 === that.formSearch.teamName && this.pick2.indexOf(that.formSearch.heroName) > -1) ||
                      (this.name2 === that.formSearch.teamName && this.pick1.indexOf(that.formSearch.heroName) > -1)) &&
                  this.winner === that.formSearch.teamName
              );
            },
          },
          function (err, docs) {
            // debugger;
            let games = docs
            // 总场次
            that.teamHero.pkHeroWonNum = games.length || 0;
          }
      );
    },
    getTeamPkHeroNum() {
      let that = this;
      this.$db.records.loadDatabase();
      this.$db.records.find(
          {
            $where: function () {
              return (
                  this.date >= that.formSearch.date1 &&
                  this.date <= that.formSearch.date2 &&
                  ((this.name1 === that.formSearch.teamName && this.pick2.indexOf(that.formSearch.heroName) > -1) ||
                      (this.name2 === that.formSearch.teamName && this.pick1.indexOf(that.formSearch.heroName) > -1))
              );
            },
          },
          function (err, docs) {
            // debugger;
            let games = docs
            // 总场次
            that.teamHero.pkHeroNum = games.length || 0;
          }
      );
    },
    getTeamBanHeroNum() {  // 队伍禁用英雄次数
      let that = this;
      this.$db.records.loadDatabase();
      this.$db.records.find(
          {
            $where: function () {
              return (
                  this.date >= that.formSearch.date1 &&
                  this.date <= that.formSearch.date2 &&
                  ((this.name1 === that.formSearch.teamName && this.ban1.indexOf(that.formSearch.heroName) > -1) ||
                      (this.name2 === that.formSearch.teamName && this.ban2.indexOf(that.formSearch.heroName) > -1))
              );
            },
          },
          function (err, docs) {
            // console.log("games: ", docs);
            let games = docs;
            // 总场次
            that.teamHero.teamBanHeroNum = games.length;
          }
      );
    },
    getTeamTotalNum() {
      let that = this;
      this.$db.records.loadDatabase()
      this.$db.records.find(
          {
            $where: function () {
              return (
                  this.date >= that.formSearch.date1 &&
                  this.date <= that.formSearch.date2 &&
                  (this.name1 === that.formSearch.teamName ||
                      this.name2 === that.formSearch.teamName)
              );
            },
          },
          function (err, docs) {
            // console.log("games: ", docs);
            let games = docs;
            // 总场次
            that.teamHero.teamTotalGames = games.length;
          }
      );
    },
    getTeamWonNum() {
      let that = this;
      this.$db.records.loadDatabase();
      this.$db.records.find(
          {
            $where: function () {
              return (
                  this.date >= that.formSearch.date1 &&
                  this.date <= that.formSearch.date2 &&
                  this.winner === that.formSearch.teamName
              );
            },
          },
          function (err, docs) {
            // console.log("games: ", docs);
            let games = docs;
            // 总场次
            that.teamHero.teamWonNum = games.length;
          }
      );
    },
    getHeroTotalNum() {
      let that = this;
      this.$db.records.loadDatabase();
      this.$db.records.find(
          {
            $where: function () {
              return (
                  this.date >= that.formSearch.date1 &&
                  this.date <= that.formSearch.date2 &&
                  (this.pick1.indexOf(that.formSearch.heroName) > -1 ||
                      this.pick2.indexOf(that.formSearch.heroName) > -1)
              );
            },
          },
          function (err, docs) {
            // console.log("games: ", docs);
            let games = docs;
            // 总场次
            that.teamHero.heroTotalNum = games.length;
          }
      );
    },
    getHeroWonNum() {
      let that = this;
      this.$db.records.loadDatabase();
      this.$db.records.find(
          {
            $where: function () {
              return (
                  this.date >= that.formSearch.date1 &&
                  this.date <= that.formSearch.date2 &&
                  ((this.pick1.indexOf(that.formSearch.heroName) > -1 &&
                      this.winner === this.name1) ||
                      (this.pick2.indexOf(that.formSearch.heroName) > -1 &&
                          this.winner === this.name2))
              );
            },
          },
          function (err, docs) {
            // console.log("heroWon: ", docs);
            let games = docs;
            // 总场次
            that.teamHero.heroWonNum = games.length;
          }
      );
    },
    heroSearch(queryString, callback) {
      let that = this;
      let results = [];
      this.$db.heros.loadDatabase();
      this.$db.heros.find(
          {
            $where: function () {
              return this.keywords.indexOf(queryString) > -1;
            },
          },
          function (err, docs) {
            // console.log("heros:", docs);
            docs.forEach((heroThis) => {
              results.push({
                keywords: heroThis.keywords,
                value: heroThis.name,
                src: heroThis.src,
                _id: heroThis._id,
              });
            });
          }
      );
      // 调用 callback 返回建议列表的数据
      callback(results);
    },
    teamSearch(queryString, callback) {
      let that = this;
      let results = [];
      this.$db.teams.loadDatabase();
      this.$db.teams.find(
          {
            $where: function () {
              return this.name.indexOf(queryString) > -1;
            },
          },
          function (err, docs) {
            // console.log("teams:", docs);
            docs.forEach((teamThis) => {
              results.push({
                value: teamThis.name,
                _id: teamThis._id,
                logo: teamThis.logo,
                desc: teamThis.desc,
              });
            });
          }
      );
      // 调用 callback 返回建议列表的数据
      callback(results);
    },
    heroSelect(item) {
      this.heroThis = item;
      // console.log("heroThis: ", this.heroThis);
      this.getHeroTotalNum();
      this.getHeroWonNum();
      // debugger;
    },
    teamSelect(item) {
      this.teamThis = item;
      // console.log("teamThis: ", this.teamThis);
      this.getTeamTotalNum();
      this.getTeamWonNum();
      // debugger;
    },
    keepTwoDecimal(num) {
      var result = parseFloat(num);
      if (isNaN(result)) {
        // alert('传递参数错误，请检查！');
        return 0;
      }
      result = Math.round(num * 100) / 100;
      return result;
    },
    updateRate() {
      let rate = (this.teamHero.teamWonNum / this.teamHero.teamTotalGames) * 100.0
      this.teamHero.teamWonRate = this.keepTwoDecimal(rate.toString());
      let rate1 = (this.teamHero.heroWonNum / this.teamHero.heroTotalNum) * 100.0
      this.teamHero.heroWonRate = this.keepTwoDecimal(rate1.toString())
      let rate2 = (this.teamHero.pickHeroWonNum / this.teamHero.pickHeroNum) * 100.0
      this.teamHero.pickHeroWonRate = this.keepTwoDecimal(rate2.toString())
    }
  },
};
</script>

<style>
</style>
